<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/plugins/swiper/css/swiper.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/plugins/jquery/jquery-3.4.0.min.js"></script>
    <script src="/plugins/swiper/js/swiper.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.js"></script>
    <script src="/plugins/bootstrapPager.js"></script>
</head>

<body>
    <% include header%>

    <!-- 网站内容模块 -->
    <div class="container-w main">
        <div class="left">
            <!-- 网站轮播图 -->
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <%banners.forEach(function(banner){%>
                            <div class="swiper-slide">
                                    <a href="/index/banner/<%=banner.linkUrl%>">
                                    <img src="<%=banner.imgUrl%><%=banner.imgName%>" alt="">
                                    </a>
                                </div>
                        <%})%>
                        
                        
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>

            <!-- 文章分类 -->
            <div class="artical">
                <div class="fenlei">
                    <ul>
                        <%types.forEach(function(type){%>
                            <li ><a href="/index/detail/<%=type.classId%>"><%=type.className%></a></li>
                        <%})%>
                        
                    
                    </ul>
                </div>
                <!-- 文章列表 -->
                <div class="content">
                    <%articals.forEach(function(artical){%>
                        <div class="list">
                                <a href="/detail/<%=artical.articalId%>">
                                <h3><%=artical.articalName%></h3>
                               
                                <div class="bottom">
                                    <span><%=artical.updateTime%></span>
                                    <span><%=artical.userName%></span>
                                </div>
                                </a>
                            </div>
        
                    <%})%>
                    
                    
                    </div>

                    <!-- 分页菜单 -->
                    <div class="pagebox">
                    </div>
                </div>
           
        </div>
        <div class="right">
            <div class="sendArtical">
                <a href="/create">发布文章</a>
            </div>
            <div class="newsList">
                <h3>最新文章</h3>
                <ul>
                    <li><a href="#">阿里云前端技术周刊第八期</a></li>
                    <li><a href="#">实现一个前端路由，如何实现浏览器的前进与后退 ？</a></li>
                    <li><a href="#">JavaScript 中数组方法 reduce 的妙用之处</a></li>
                    <li><a href="#">IIFE为什么不会污染全局变量</a></li>
                    <li><a href="#">如何实现一个下载进度条/播放进度条</a></li>
                </ul>
            </div>
            <div class="ganggao">
            </div>

            <div class="msg">
                <h3>联系我们</h3>
                <P>手机号:18888888</P>
                <P>QQ:9494985729</P>
                <P>微信:wx8d8d8d8</P>
            </div>
        </div>
    </div>


   
     <!-- 页面底部 -->
     <div class="footer">
            <div class="container-w">
                    <div class="footer-left">
                        <p>初心教育专注于从事互联网IT教育培训,致力于培养高质量互联网行业中高端技术人才,目前开设高级前端全栈学科,java全栈应用学科培养工作中能够快速开发项目能力.</p>
                        <p>公司地址: 武汉市江夏区关南园一路当代光谷梦工厂2栋</p>
                    </div>
                    <div class="footer-right">
                        <div class="phton">
                            <p>联系电话:188888888</p>
                            <p>微信:wx18888888</p>
                            <img src="/images/ewm.jpg" alt="">
                        </div>
                    </div>
            </div>
         
        </div>


    <script src="/js/index.js"></script>
    
</body>

</html>